<template>
  <view class="page">
    <view class="title">{{tenentName || ''}}过磅单</view>
    <view class="sub-title">编号：{{result.printOrderNumber || ''}}</view>
    <view class="table">
      <view class="tr">
        <view class="th label">客户</view>
        <view class="th">{{result.customerName || ''}}</view>
        <view class="th label">运单编号</view>
        <view class="th">{{result.waybillNo || ''}}</view>
      </view>
      <view class="tr">
        <view class="td label">车号</view>
        <view class="td">{{result.vehicleNo || ''}}</view>
        <view class="td label">煤种</view>
        <view class="td">{{result.coalSubtypeName || ''}}</view>
        <view class="td label">单价</view>
        <view class="td">{{viewBDInfoPer ? result.endPrice : ''}}</view>
      </view>
      <view class="tr">
        <view class="td label">毛重</view>
        <view class="td">{{result.grossWeight}}</view>
        <view class="td label">皮重</view>
        <view class="td">{{result.netWeight}}</view>
        <view class="td label">净重</view>
        <view class="td">{{result.totalWeight}}</view>
      </view>
      <!-- <view class="tr">
        <view class="td">重磅位置</view>
        <view class="td">客户</view>
        <view class="td">客户</view>
        <view class="td">客户</view>
        <view class="td">客户</view>
        <view class="td">客户</view>
      </view> -->
      <view class="tr">
        <view class="td label">总价</view>
        <view class="td">{{viewBDInfoPer ? result.priceTotal : ''}}</view>
      </view>
    </view>
    <view class="footer">
      <view>空磅时间：{{result.netTime ? datetimeFormatter(result.netTime): '-'}}</view>
      <view>重磅时间：{{result.grossTime ? datetimeFormatter(result.grossTime): '-'}}</view>
      <view>开票人：{{viewBDInfoPer ? '韩彦君' : '-'}}</view>
    </view>
    <image v-if="url && viewBDInfoPer" :src="url"></image>
  </view>
</template>

<script>
  import config from '@/config';
  import { getTenantId } from '@/utils/auth';
  import { getTenentList } from '@/api/login.js';
  import { getSaleWaybillById, getDataByType } from "@/api/system/waybill.js"
  import { toast, timestampToFormatter } from '@/utils/common';

  export default {
    data() {
      return {
        id: undefined,
        url: undefined,
        tenentName: undefined,
        phone: uni.getStorageSync('sjxxData').mobile,
        result: {}
      }
    },
    computed: {
      datetimeFormatter() {
        return (time) => {
          return timestampToFormatter(time)
        }
      },
      viewBDInfoPer() {
        return this.result.tenantId === config.viewBDInfoPer
      }
    },
    onLoad(options) {
      this.id = options.id
    },
    onShow() {
      this.getDataByType()
      this.getTenentList()
      this.getSaleWaybillById()
    },
    methods: {
      async getTenentList() {
        const res = await getTenentList(this.phone)
        if (res.code === 0) {
          const list = res.data || []
          this.tenentName = list.find(
            (e) => e.id == getTenantId()
          )?.enterName;
        }
      },
      async getSaleWaybillById() {
        const res = await getSaleWaybillById({ id: this.id })
        if (res.code === 0) {
          this.result = res.data || {}
        } else {
          toast(res.msg)
        }
      },
      async getDataByType() {
        const data = {
          dictType: 'pound_note_signature',
          tenantId: getTenantId()
        }
        const res = await getDataByType(data)
        if (res.code === '200') {
          const result = res.data || []
          this.url = result.find(e => e.label == 'pound_note_signature')?.value
        } else {
          toast(res.msg)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0 30px 20px 30px;
    background-color: #ffffff;

    .title {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: #ff4d4f;
      padding: 16px 0 5px 0;
      font-family: PingFang SC, PingFang SC-600;
      border-bottom: 2px solid #FF4D4F;
    }

    .sub-title {
      margin: 16px 0 8px 0;
      font-size: 15px;
      color: #3a3a3a;
    }

    image {
      width: 132px;
      height: 99px;
      position: absolute;
      top: 0;
      left: calc(50% - 66px);
    }
  }

  .table {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    border: 1px solid #3A3A3A;
    font-family: PingFang SC, PingFang SC-400;

    >.tr {
      display: flex;
      width: 100%;
      flex: 1;

      .th,
      .td {
        display: flex;
        align-items: center;
        padding: 8px 5px;
      }

      :nth-child(1).th,
      :nth-child(1).td {
        width: 12%;
      }

      :nth-child(2).th {
        width: 48%;
      }

      :nth-child(2).td,
      :nth-child(3).td,
      :nth-child(4).td {
        width: 16%
      }

      :nth-child(3).th,
      :nth-child(5).td {
        width: 12%;
      }

      :nth-child(4).th,
      :nth-child(6).td {
        width: 28%;
      }

    }

    .label {
      justify-content: center;
      background-color: rgba(64, 158, 254, 0.10);
    }

    .th:not(.label),
    .td:not(.label) {
      font-weight: 600;
    }

    :nth-child(4).tr :nth-child(2).td {
      width: 88%;
    }

    .tr+.tr {
      border-top: 1px solid #3A3A3A;
    }

    .th+.th,
    .td+.td {
      border-left: 1px solid #3A3A3A;
    }
  }

  .footer {
    display: flex;
    font-size: 14px;
    margin-top: 10px;

    :nth-child(2) {
      text-align: center;
    }

    :nth-child(3) {
      text-align: end;
    }

    >view {
      flex: 1;
    }
  }
</style>